<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>DataTables | Gentelella</title>

  <!-- Bootstrap -->
  <link href="/graduation-manager/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="/graduation-manager/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- NProgress -->
  <link href="/graduation-manager/vendors/nprogress/nprogress.css" rel="stylesheet">
  <!-- iCheck -->
  <link href="/graduation-manager/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
  <!-- Datatables -->
  <link href="/graduation-manager/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css"
        rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css"
        rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
  <link href="/graduation-manager/vendors/toastr/toastr.min.css" rel="stylesheet">

  <!-- Custom Theme Style -->
  <link href="/graduation-manager/build/css/custom.min.css" rel="stylesheet">
</head>
<body>
<div class="">
  <div class="col-md-12">
    <div class="x_panel" style="">
      <div class="x_title">
        <h2>Plus Table Design</small></h2>
        <ul class="nav navbar-right panel_toolbox">
          <li><a id="createTask" data-href="/graduation-manager/production/createTask.html"
                 data-placement="left" title="创建任务"><i
              class="fa fa-plus"></i></a>
          <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
          </li>
          <li class="dropdown" style="display: none">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i
                class="fa fa-wrench"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Settings 1</a>
              </li>
              <li><a href="#">Settings 2</a>
              </li>
            </ul>
          </li>
          <li><a class="close-link" data-toggle="tooltip" data-placement="left" title="关闭"><i
              class="fa fa-close"></i></a>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <p class="text-muted font-13 m-b-30">
          DataTables has most features enabled by default, so all you need to do to use it with your own tables
          is to call the construction function: <code>$().DataTable();</code>
        </p>
        <table id="datatable_role" class="table table-striped projects">

        </table>
      </div>
    </div>

    <div class="modal fade" id="userModel" tabindex="-1" role="dialog" aria-labelledby="detailLabel"
         data-backdrop="false" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h5 class="modal-title" id="detailLabel">
              用户信息
            </h5>
          </div>
          <!-- 编辑form -->
          <form id="form" role="form" method="post" action="">
            <div class="modal-body">
              <div class="form-body">
                <div class="row">
                  <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group form-md-line-input">
                      <label>标题</label>
                      <input type="text" class="form-control" name="title">
                    </div>
                  </div>

                  <input id="startTime" type="hidden" class="form-control"
                         name="startTime"/>
                  <input id="endTime" type="hidden" class="form-control" name="endTime"/>

                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="form-group form-md-line-input">
                      <label>起止时间</label>
                      <fieldset>
                        <div class="control-group">
                          <div class="controls">
                            <div class="input-prepend input-group">
                              <span class="add-on input-group-addon"><i
                                  class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
                              <input type="text" style="width: 200px" name="reservation" id="start_end"
                                     class="form-control" value=""/>
                            </div>
                          </div>
                        </div>
                      </fieldset>
                    </div>
                  </div>

                  <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group form-md-line-input">
                      <label>任务目标对象</label>
                    </div>
                  </div>

                  <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="form-group form-md-line-input">
                      <label>要求</label>
                      <textarea type="text" class="form-control" name="description" data-dftVal=""/>
                    </div>
                  </div>
                </div>
                <!-- ./row -->
              </div>
              <!-- /.编辑form -->
            </div>
            <!-- ./modal-body -->
            <div class="modal-footer">
              <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
              <button type="button" name="save" class="btn btn-primary">保存</button>
            </div>
          </form>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</div>
<!-- jQuery -->
<!--<script src="/graduation-manager/vendors/jquery/dist/jquery.min.js"></script>-->
<!--&lt;!&ndash; Bootstrap &ndash;&gt;-->
<!--<script src="/graduation-manager/vendors/bootstrap/dist/js/bootstrap.min.js"></script>-->
<!--&lt;!&ndash; FastClick &ndash;&gt;-->
<!--<script src="/graduation-manager/vendors/fastclick/lib/fastclick.js"></script>-->
<!--&lt;!&ndash; NProgress &ndash;&gt;-->
<!--<script src="/graduation-manager/vendors/nprogress/nprogress.js"></script>-->
<!--&lt;!&ndash; iCheck &ndash;&gt;-->
<!--<script src="/graduation-manager/vendors/iCheck/icheck.min.js"></script>-->
<!--&lt;!&ndash; Datatables &ndash;&gt;-->
<!--<script src="/graduation-manager/vendors/datatables.net/js/jquery.dataTables.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>-->
<!--<script src="/graduation-manager/vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/jszip/dist/jszip.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/pdfmake/build/pdfmake.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/pdfmake/build/vfs_fonts.js"></script>-->
<!--<script src="/graduation-manager/vendors/toastr/toastr.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/jquery-confirm/js/jquery-confirm.js"></script>-->
<!--<script src="/graduation-manager/vendors/moment/min/moment.min.js"></script>-->
<!--<script src="/graduation-manager/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>-->
<!-- Custom Theme Scripts -->
<!--<script src="/graduation-manager/build/js/custom.js"></script>-->
<!--<script src="/graduation-manager/build/js/common.js"></script>-->
<script type="text/javascript">
  $(function () {
    //列表table初始化
    drawTable();
    // 模块上的 按钮
    $('.collapse-link').on('click', function () {
      var $BOX_PANEL = $(this).closest('.x_panel'),
          $ICON = $(this).find('i'),
          $BOX_CONTENT = $BOX_PANEL.find('.x_content');

      // fix for some div with hardcoded fix class
      if ($BOX_PANEL.attr('style')) {
        $BOX_CONTENT.slideToggle(200, function () {
          $BOX_PANEL.removeAttr('style');
        });
      } else {
        $BOX_CONTENT.slideToggle(200);
        $BOX_PANEL.css('height', 'auto');
      }

      $ICON.toggleClass('fa-chevron-up fa-chevron-down');
    });

    $('.close-link').click(function () {
      var $BOX_PANEL = $(this).closest('.x_panel');

      $BOX_PANEL.remove();
    });

    $('button[name="save"]').click(function () {
      $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        dataType: 'json',
        timeout: 60000,
        success: function (resData, status, xhr) {
          if (resData.code == 200) {
            toastr.success(resData.msg);
            $("#datatable_role").DataTable().destroy();
            drawTable();
            $('#userModel').modal('hide');
          } else {
            toastr.error(resData.msg);
          }
        },
        error: function (xhr, errorType, error) {
          console(xhr, errorType, error);
          toastr.error("服务器异常");
        }
      })
    });

    //新增时，初始化默认值
    $('a[data-target="#userModel"]').on('click', function () {
      _initDftModal($('#userModel'));
      $(form).attr('action', '../userInfo/saveInfo.do');
      $('.modal-footer', $("#userModel")).show();
      $('#userModel').modal('show');
    });
    //编辑按钮
    $('table').on('click', 'tbody>tr>td>a', function () {
      var that = $(this),
          fn = that.data('fn'),
          objectId = that.data('objectid'),
          act = that.data('act'),
          modalId = that.data('modal'),
          tableId = that.data('table'),
          object = that.data('object');
      //
      //console.info(fn, oid, act, modalId, tableId);
      var modal = $('#' + modalId);
      var action = act + '?' + object + 'Id=' + objectId;
      switch (fn) {
        case 'select':
          _doRead(modal, action, true);
          break;
        case 'edit':
          $(form).attr('action', '../task/update.do');
          _doRead(modal, action, false);
          break;
        case 'del':
          var table = $('#' + tableId);
          _doDel(table, action);
          break;
      }
    });
    $('#createTask').click(function () {
      var href = $(this).data('href');
      $('#content').load(href);
    });

  });

  function drawTable() {
    $("#datatable_role").dataTable({
      "autoWidth": true,//是否自适应宽度

      ajax: /*{
       url: '/gratuation-manager/user/login.do',
       data: {
       loginName: "admin",
       password: "admin"
       },
       type: 'POST',
       //dataSrc: 'data',
       },*/
          function (data, callback, settings) {
            //封装请求参数
            var param = {};
            param.start = data.start;//开始的记录序号
            param.length = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
            param.page = (data.start / data.length) + 1;//当前页码
            $.ajax({
              type: 'POST',
              url: '/graduation-manager/task/selectTaskList.do',
              dataType: 'json',
              timeout: 60000,
//          cache: false, //禁用缓存
              success: function (resData, status, xhr) {
                //console.info(resData, status, xhr);
                if (resData.code == 200) {
                  var returnData = {};
                  returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                  returnData.recordsTotal = 1;//resData.data.total;
                  returnData.recordsFiltered = 1;// resData.data.total;
                  returnData.data = resData.data;
                  callback(returnData);
                }
                // Progressbar
                if ($(".progress .progress-bar")[0]) {
                  $('.progress .progress-bar').progressbar();
                }
              },
              error: function (xhr, errorType, error) {
                toastr.error("服务器异常");
              }
            });
          },
      //列表表头字段
      columns: [
        {
          data: "taskId",
          title: "任务Id"
        },
        {
          data: "title",
          title: "任务名称",
          render: function (data, type, row, meta) {
            var title = row.title;
            var genTime = row.genTime;
            var html = '';
            html += '<a>' + title + '</a><br /> <small>创建于 ' + genTime + '</small>';
            return html;
          }
        },
        {
          data: "statrTime",
          title: "起始时间",
          render: function (data, type, row, meta) {
            var startTime = row.startTime,
                endTime = row.endTime,
                html = '';
            html += '<a>' + startTime + '</a> ~ <a>' + endTime + '</a>';
            return html;
          }
        },
        {
          data: "progress",
          title: "任务进程",
          render: function (data, type, row, meta) {
            var html = '',
                progress = row.progress;
            html += '<div class="progress progress_sm"> <div class="progress-bar bg-green" role="progressbar" data-transitiongoal="' + progress + '"></div> </div> <small>' + progress + '% Complete</small>';
            return html;
          }
        },
        {
          data: null,
          title: "操作",
          render: function (data, type, row, meta) {
            var html = '',
                objectId = row.taskId;
            html += '<a class="btn btn-link btn-xs" data-object="task" data-fn="select" data-act="/graduation-manager/task/select.do" data-objectId="' + objectId + '" data-modal="userModel" data-toggle="tooltip" data-placement="left" title="详情"><i class="fa fa-file-text-o" aria-hidden="true"></i></a>';
            html += '<a class="btn btn-link btn-xs" data-object="task" data-fn="edit" data-act="/graduation-manager/task/select.do" data-objectId="' + objectId + '" data-modal="userModel" data-toggle="tooltip" data-placement="left" title="编辑"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>';
            html += '<a class="btn btn-link btn-xs" data-object="task" data-fn="del" data-act="/graduation-manager/task/delete.do" data-objectId="' + objectId + '" data-table="datatable_role" data-toggle="tooltip" data-placement="left" title="删除"><i class="fa fa-trash" aria-hidden="true"></i></a>';
            return html;
          }
        }
      ]
    });
  }


</script>
</body>
</html>